const createStorage = () => {
  const storage = {
    prefix: 'app_',

    getKey(key) {
      return this.prefix + key;
    },

    defineReactive(key, initialValue) {
      let value = initialValue;

      Object.defineProperty(this, key, {
        get() {
          return value;
        },
        set(newValue) {
          value = newValue;
          try {
            const stringValue = typeof newValue === 'object' ? JSON.stringify(newValue) : String(newValue);
            localStorage.setItem(this.prefix + key, stringValue);
          } catch (error) {
            console.error('Storage set error:', error);
          }
        },
        enumerable: true,
        configurable: true
      });
    }
  };

  // 使用 Proxy 拦截所有属性访问和设置
  return new Proxy(storage, {
    get(target, prop) {
      // 如果属性已存在且不是方法，则直接返回
      if (prop in target && typeof target[prop] !== 'function') {
        return target[prop];
      }

      // 从 localStorage 获取值
      try {
        const item = localStorage.getItem(target.prefix + prop);
        if (item === null) return undefined;

        try {
          return JSON.parse(item);
        } catch {
          return item;
        }
      } catch (error) {
        console.error('Storage get error:', error);
        return undefined;
      }
    },

    set(target, prop, value) {
      // 如果是设置方法或内置属性，直接设置
      if (typeof value === 'function' || prop === 'prefix') {
        target[prop] = value;
        return true;
      }

      // 自动定义响应式属性
      target.defineReactive(prop, value);
      return true;
    }
  });
};

export const $storage = createStorage();
